<template>
  <div class="balance">
    <user-menu active="1" />
    <div class="u-container">
      <ul class="clearfix toptab">
        <li class="tabactive">
          <p>我的余额</p>
        </li>
      </ul>
      <div class="balanceBox">
        <div class="balanceShow">
          <h3>我的余额：
            <span>56.00</span>
          </h3>
        </div>
        <div class="balanceRecharge">
          <el-form
            :model="numberValidateForm"
            ref="numberValidateForm"
          >
            <el-form-item
              prop="moneyNum"
              :rules="[
                  { required: true, message: '请输入充值金额'},
                  { pattern: /^[1-9][0-9]{0,6}$/, message: '请输入输入大于0的正整数', trigger: ['change','blur']}
                ]"
            >
              <el-input
                placeholder="请输入充值金额"
                v-model="numberValidateForm.moneyNum"
                clearable
                :maxlength="6"
              >
                </el-input>
                <el-button type="primary">充值</el-button>
                </el-form-item>
                </el-form>

        </div>

      </div>
      <div class="balance-table">
        <h3 class="table-title">余额明细</h3>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="date"
            label="时间"
            width="200"
          >
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              width="180"
            >
              <template slot-scope="scope">
                <span :style="{'color': ((scope.row.status).slice(0,1)==='-'?'#ff0000':'green')}">{{scope.row.status}}</span>
              </template>
              </el-table-column>
              <el-table-column
                prop="remarks"
                label="备注"
              >
                </el-table-column>
                </el-table>
                <div class="tablePagination">
                  <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="10"
                  >
                    </el-pagination>
                </div>

      </div>
    </div>
  </div>
</template>

<script>
import UserMenu from '@/components/UserMenu.vue'
export default {
  components: {
    UserMenu
  },
  data() {
    return {
      numberValidateForm: {
        moneyNum: ''
      },
      tableData: [
        {
          date: '2016-05-09 08:20:12',
          status: '-10',
          remarks: '购买课程《Python Flask快速入门与进阶》'
        },
        {
          date: '2016-05-02 08:20:12',
          status: '+1',
          remarks: '充值'
        },
        {
          date: '2016-05-04 08:20:12',
          status: '+1',
          remarks: '充值'
        },
        {
          date: '2016-05-01 08:20:12',
          status: '+1',
          remarks: '充值'
        },
        {
          date: '2016-05-03 08:20:12',
          status: '+1',
          remarks: '充值'
        },
        {
          date: '2016-05-04 08:20:12',
          status: '+1',
          remarks: '充值'
        },
        {
          date: '2016-05-01 08:20:12',
          status: '+1',
          remarks: '充值'
        },
        {
          date: '2016-05-03 08:20:12',
          status: '+1',
          remarks: '充值'
        },
        {
          date: '2016-05-04 08:20:12',
          status: '+1',
          remarks: '充值'
        },
        {
          date: '2016-05-01 08:20:12',
          status: '+1',
          remarks: '充值'
        }
      ]
    }
  },
  mounted() {},
  methods: {}
}
</script>
<style lang="scss">
.balance-table {
  .table-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 48px;
  }
}
.balanceShow {
  padding: 30px;
  h3 {
    font-weight: 400;
    font-size: 14px;
    span {
      font-size: 24px;
    }
  }
}
.balanceRecharge {
  padding: 0 30px 50px 30px;
  .el-form,
  .el-form-item__content {
    height: 42px;
  }
  .el-input {
    width: 200px;
  }
  button {
    margin-left: 20px;
  }
}
</style>
